<template>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" >
        <el-form-item>
          <el-input v-model="dataForm.skuNo" placeholder="请输入sku编码" clearable></el-input>
        </el-form-item>
        <el-form-item>
        <el-select v-model="dataForm.showStatus" placeholder="请选显示状态">
          <el-option v-for="(item,index) in showStatus" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="dataForm.status" placeholder="请选商品状态">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="resetting()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="id" header-align="center" align="center" label="序号">
          <template slot-scope="scope">
            <div v-if="scope.row">
              {{ scope.$index+1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="skuNo" header-align="center" align="center" label="sku编码">
        </el-table-column>
        <el-table-column prop="name" header-align="center" align="center" label="sku名称">
        </el-table-column>
        <el-table-column prop="amount" header-align="center" align="center" label="面额/金额">
        </el-table-column>
        <el-table-column prop="storeName" header-align="center" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="cateName" header-align="center" align="center" label="分类名称">
        </el-table-column>
        <el-table-column prop="costPrice" header-align="center" align="center" label="成本价">
        </el-table-column>
        <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
            <template slot-scope="scope">
            <span>{{
             scope.row.showStatus==0?'隐藏':'展示'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="商品状态">
            <template slot-scope="scope">
            <span>{{
              scope.row.status==0?'下架':'上架'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="platformCostPrice" header-align="center" align="center" label="平台售价">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="adds(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <el-dialog
    title="编辑"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
  >
    <el-form
      :model="info"
      :rules="dataRule"
      ref="dataForm"
      label-width="80px"
    >
    <el-form-item label="平台售价" prop="platformCostPrice">
        <el-input
        style="width: 200px;"
          v-model="info.platformCostPrice"
          placeholder="请输名称"
          oninput="this.value = this.value.replace(/[^\d.]/g,'').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')"
        ></el-input>
      </el-form-item>
    <el-form-item label="显示状态" prop="showStatus">
        <el-select v-model="info.showStatus" placeholder="请选择显示状态">
          <el-option v-for="(item,index) in showStatus" :key="index" :label="item.label" :value="item.value" v-if="index>0">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sortNum">
        <el-input
        style="width: 200px;"
          v-model="info.sortNum"
          placeholder="请输入排序"
          oninput="value=value.replace(/[^0-9]/g,'')"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" >确定</el-button>
    </span>
    <!-- <upload v-if="uploadVisible" ref="upload" :uploadList = 'uploadList'></upload> -->
  </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        baseurl: '',
        dataForm: {
         skuNo: '',
          status:'',
          showStatus:'',
        },
        dialogVisible: false,
        dateArr: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        info: {
            platformCostPrice:'',
            showStatus:'',
            sortNum:''
        },
      isdisabled: false,
        dataRule: {
            platformCostPrice: [
              { required: true, message: '请输入平台售价', trigger: 'blur' }
            ],
            showStatus: [
            {required: true,message: '请输入排序',trigger: 'blur'}
            ],
            sortNum: [
            { required: true, message: '请选择排序', trigger: 'blur' }
            ]
        },
        showStatus: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '显示'
        },
        {
          value: 0,
          label: '隐藏'
        }
      ],
      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 0,
          label: '下架'
        },
        {
          value: 1,
          label: '上架'
        }
      ],
      }
    },
    // components: {
    //   VueQr,
    //   },
    activated() {
      this.getDataList()
      this.getUrl()
    },
    methods: {
            // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.isdisabled = true
          this.$http({
            url: this.$http.adornUrl('/admin/product/sku/update'),
            method: 'post',
            data: this.$http.adornData({
                platformCostPrice: this.info.platformCostPrice,
                showStatus: this.info.showStatus,
                skuNo: this.info.skuNo,
                sortNum: this.info.sortNum,
            })
          }).then(({ data }) => {
            if (data && data.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dialogVisible = false
                  this.$emit('refreshDataList')
                }
              })
            this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
            this.isdisabled = false
          })
        }
      })
    },
      getUrl() {
        this.$http({
          url: this.$http.adornUrl(
            `/common/base/url?key=` + 'REG_DOMAIN_URL'
          ),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.baseurl = data.data
          }
        })
      },
      adds(e) {
        this.info =''
        this.info = JSON.parse(JSON.stringify(e));
        this.dialogVisible = true
      },
      handleClose() {
        this.dialogVisible = false
      },
      resetting() {
        this.dataForm.status = ''
        this.dataForm.showStatus = ''
        this.dataForm.skuNo = ''
        this.dateArr = []
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        const params = {
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          status: this.dataForm.status,
          skuNo: this.dataForm.skuNo,
          showStatus: this.dataForm.showStatus,
        }
        this.$http({
          url: this.$http.adornUrl(`/admin/product/sku/page`),
          method: 'post',
          data: this.$http.adornData(params)
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.dataList = data.list
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
    }
  }
  </script>
  <style >
  .sharePopCont .title {
    width: 84px;
    flex-shrink: 0;
    color: #000;
  }
  
  .sharePopCont .top {
    display: flex;
    margin-top: 10px;
  }
  
  .sharePopCont .top .btn {
    margin-left: 10px;
  }
  </style>
  